<template>
  <div>
    <MForm :fields="fields" @submit="search" @cancel="search"> </MForm>
    <MTable :columns="columns" :http="roleList" :params="params" rowKey="roleId" v-model:isReload="isReload"
      v-model:selectKeys="selectKeys">
      <template #extra>
        <el-button v-if="$checkAuth('systemRoleAdd')" type="primary" @click="edit(0)">新增</el-button>
        <MDeleteButton v-if="$checkAuth('systemRoleDelBatch')" :http="roleDel" :http-key="false"
          :selectKeys="selectKeys" @reload="clearSelectKeysReload"></MDeleteButton>
      </template>

      <template #menuIds="{ row }">
        <MA type="primary" @click="setPerm(row.roleId, true)">查阅功能权限</MA>
      </template>

      <template #actions="{ row }">
        <MA v-if="$checkAuth('systemRoleSetDataPerm')" type="primary" @click="showDataPermission(row.roleId)">设置数据权限
        </MA>
        <MA v-if="$checkAuth('systemRoleSetPerm')" type="primary" @click="setPerm(row.roleId)">设置功能权限</MA>
        <MA v-if="$checkAuth('systemRoleViewUsers')" type="primary" @click="showRoleUserView(row.roleId)">查阅用户</MA>
        <MA v-if="$checkAuth('systemRoleEdit')" type="primary" @click="edit(row.roleId)">编辑</MA>
        <MA v-if="$checkAuth('systemRoleDel')" type="danger" @click="del([row.roleId])">删除</MA>
      </template>
    </MTable>

    <MFormDialog v-model="formDialog.visible" v-bind="formDialog" :fields="dialogFields" :httpAdd="roleAdd"
      :httpEdit="roleEdit" :httpGet="roleDetails" :handler="handler" @reload="reload"></MFormDialog>

    <!-- 设置功能权限 -->
    <MFormDialog v-model="permDialog.visible" v-bind="permDialog" :fields="permDialogFields" edit-title="设置功能权限"
      :httpAdd="roleAdd" :httpEdit="roleEdit" :httpGet="roleDetails" :handler="permHandler" :getHandler="permGetHandler"
      @reload="reload"></MFormDialog>

    <!-- 查阅用户 -->
    <RoleUserView ref="roleUserViewRef"></RoleUserView>
    <!-- 设置数据权限 -->
    <DataPermission ref="dataPermissionRef"></DataPermission>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { columns, fields, dialogFields, permDialogFields } from './config'
import {
  roleList,
  roleAdd,
  roleDel,
  roleDetails,
  roleEdit
} from '@/api/system/role'
import { menuTreeselect } from '@/api/system/rolePermission'
import RoleUserView from '../roleUserView/roleUserView.vue'
import DataPermission from '../dataPermission/dataPermission.vue'
import { useMenuHandler } from './useMenuHandler'

defineOptions({
  name: 'systemTag'
})

let menuHandler = {
  handler: (v: any) => v,
  getHandler: (v: any) => v
}
menuTreeselect().then((res) => {
  menuHandler = useMenuHandler(res.data)
  permDialogFields.find((v) => v.key === 'menuIds')!.attrs!.data = res.data
})

const permHandler = (data: any) => {
  return {
    ...data,
    menuIds: menuHandler.handler(data.menuIds)
  }
}

const permGetHandler = (data: any) => {
  return {
    ...data,
    menuIds: menuHandler.getHandler(data.menuIds)
  }
}

// 搜索
const params = ref<any>({})
const search = (data: any) => {
  params.value = {
    ...params.value,
    ...data
  }
}

// 新增/编辑
const formDialog = reactive({
  visible: false,
  id: 0
})
const edit = (id: number) => {
  formDialog.id = id
  formDialog.visible = true
}
const handler = (data: any) => {
  return {
    ...data,
    status: '0',
    menuIds: [],
    deptIds: []
  }
}

// 设置功能权限
const permDialog = reactive({
  visible: false,
  disabled: false,
  id: 0
})
const setPerm = (id: number, disabled = false) => {
  permDialog.id = id
  permDialog.disabled = disabled
  permDialog.visible = true
}

// 重载
const isReload = ref(true)
const reload = () => {
  isReload.value = true
}

// 删除
const selectKeys = ref<number[]>([])
const clearSelectKeysReload = () => {
  selectKeys.value = []
  reload()
}

const del = (ids: number[]) => {
  roleDel(ids).then(() => {
    ElMessage.success('删除成功')
    clearSelectKeysReload()
  })
}

// 查阅用户
const roleUserViewRef = ref<typeof RoleUserView>()
const showRoleUserView = (id: number) => {
  roleUserViewRef.value?.show(id)
}

// 设置数据权限
const dataPermissionRef = ref<typeof DataPermission>()
const showDataPermission = (id: number) => {
  dataPermissionRef.value?.show(id)
}
</script>

<style lang="scss" scoped></style>
